<style>
    .elx-step-editor {
         height: 100%;
    }
    
	.elx-step-editor-header {
	    height: 36px;
	    background: #f5f5f5;
	    border-bottom: 1px solid #e0e0e0;
	}
	.elx-step-editor-content {
        height: calc(100% - 36px);
        overflow: auto;
    }
    .elx-step-editor .elx-step-editor-content>.elx-form {
	    width: 800px;
	    margin: 20px auto;
	}
	.elx-step-editor-header ul {
	    float: right;
	}
	.elx-step-editor-header ul li {
	    color: #475669;
	    float: left;
	    padding: 0px 10px;
	    line-height: 36px;
	    cursor: pointer;
	}
	.elx-step-editor-header ul li [class^=uex-icon-] {
	    vertical-align: baseline;
	}
	.elx-step-editor-content .el-textarea {
	    margin-bottom: 1px;
	}
</style>
<script type="text/x-template" id="step-editor-template">
    <div class="elx-step-editor">
        <div class="elx-step-editor-header">
		    <ul>
			    <li @click="handlerBackMain">
			        <span class="uex-icon-swap-left"></span>
			        <span>返回</span>
			    </li>
			    <li @click="handlerSave">
			        <span class="uex-icon-save" ></span>
			        <span>确定</span>
			    </li>
			    <li @click="handlerHelp">
			        <span class="uex-icon-help"></span>
			        <span>帮助</span>
			    </li>
			</ul>
	    </div>
        <div class="elx-step-editor-content">
            <elx-form ref="stepForm" :label-width="step.formConfig.labelWidth" :label-suffix="':'" v-model="step.modelData" :config ="step.formConfig"></elx-form>
        </div>
	</div>
</script>

<script>
    Vue.component('step-editor', {
        template: '#step-editor-template',
        props: {
        	step: {
        		type: Object,
        		default: function() {
        			return {
        				name: null, 
        	        	label: null, 
        	        	formConfig: {}, 
        	        	modelData: {},
        	        	cell: {}
        			}
        		}
        	}
        },
        data:function(){
            return{
            };
        },
        methods: {
        	handlerBackMain: function() {
        		this.$emit('back-main');
        	},
        	handlerSave: function() {
        		var valid = this.$refs['stepForm'].validate();
        		if (valid) {
        			this.$emit('save', this.step);
        		}
        	},
        	handlerHelp: function() {
        		console.log('help');
        	}
        },
        mounted: function () {
            
        },
        created: function () {
        }
    })
</script>